import React from 'react'
class GetPos extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            show: false,
            pos: {
                x: 0,
                y: 0,
                width: 0,
                height: 0,
                top: 0,
                right: 0,
                bottom: 0,
                left: 0,
            }
        }
        this.handleClick = this.handleClick.bind(this)
    }
    handleClick() {
        if (this.state.show) {
            this.setState({
                show: false
            })
            return
        }
        // 当前点击元素的位置
        let pos = this.divElem.getBoundingClientRect();
        this.setState({
            pos,
            show: true
        })
    }
    render() {
        return (
            <div
                style={{ width: '100px', height: '100px', border: '1px solid #ddd' }}
                onClick={this.handleClick}
                ref={(div) => { this.divElem = div }}>
                <div
                    style={{
                        display: this.state.show ? 'block' : 'none',
                        position: 'fixed',
                        top: (this.state.pos.top + this.state.pos.height) + 'px',
                        left: this.state.pos.left + 'px', width: this.state.pos.width + 'px',
                        height: this.state.pos.height + 'px',
                        backgroundColor: 'blue',
                        zIndex: 100
                    }}
                ></div>
            </div>
        )
    }
}
export default GetPos;
